<template>
  <div>
    <Dropdown style="width:100%" trigger="click" @on-click="handleClick">
        <Input v-model="checkIcon">
          <template #prepend>
            <Icon :type="checkIcon"></Icon>
          </template>
        </Input>
        <template #list>
            <Input v-model="keyWord" placeholder="搜索..." style="padding:10px;"> </Input>
            <DropdownMenu style="max-height: 200px;overflow: auto;margin: 0 6px;">
                <DropdownItem class="icon-item" :class="{'active':checkIcon===item.name}"  v-for="item in iconList" :key="item.name" :name="item.name">
                  <Icon :type="item.name" size="32"></Icon>
                </DropdownItem>
            </DropdownMenu>
        </template>
    </Dropdown>
  </div>
</template>

<script>
import IconData from '@/utils/IconData.json'
export default {
  name: 'Demo',
  props:{
    icon: {
      type: String,
      default: ''
    }
  },
  setup() {

  },
  data(){
    return {
      iconList:IconData.iconList,
      defaultIconList:IconData.iconList,
      checkIcon:'',
      keyWord:'',
    }
  },
  created(){

  },
  mounted(){
      this.checkIcon = this.icon
  },
  watch: {
      keyWord: {
          immediate: true,
          handler(val) {
            if(val){
              this.iconList = this.defaultIconList.filter((p) => {
                  return p.tag.indexOf(val) !== -1
              })
            }else{
              this.iconList = this.defaultIconList
            }
          }
      },
      icon(val){
        if(val){
          this.checkIcon = this.icon
        }
      }
  },
  computed:{
      defaultIcon(){
          return this.icon
      },
  },
  methods: {
    handleClick(name) {
      var self = this
      self.checkIcon = name;
    }
  }
}
</script>
<style scoped>
.icon-item{
    display: inline-block;
    /* padding: 6px; */
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    -webkit-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
}
.active{
  background-color: #57a3f3;
}
</style>
